@import './dark.css';

.bin-button {
  --b-btn-font-weight: var(--bin-base-font-weight);
  --b-btn-border-color: var(--bin-border-color-base);
  --b-btn-bg-color: var(--bin-white-color);
  --b-btn-text-color: var(--bin-color-text-default);
  --b-btn-disabled-text-color: var(--bin-color-text-disabled);
  --b-btn-disabled-bg-color: var(--bin-white-color);
  --b-btn-disabled-border-color: var(--bin-disabled-border-color);
  --b-btn-hover-text-color: var(--bin-color-primary);
  --b-btn-hover-bg-color: var(--bin-color-primary-light6);
  --b-btn-hover-border-color: var(--bin-color-primary);
  --b-btn-active-text-color: var(--bin-color-primary-active);
  --b-btn-active-bg-color: var(--b-btn-hover-bg-color);
  --b-btn-active-border-color: var(--bin-color-primary-active);
  --b-icon-margin: 6px;
  --b-icon-size: 16px;
}

.bin-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--bin-default-height);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: var(--b-btn-bg-color);
  border: 1px solid var(--b-btn-border-color);
  color: var(--b-btn-text-color);
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: var(--bin-animation-duration-base);
  user-select: none;
  padding: 0 16px;
  font-size: var(--bin-font-size-default);
  border-radius: var(--bin-border-radius-default);
  letter-spacing: 0.02857em;
  & + & {
    margin-left: 8px;
  }
  .bin-button__icon:not(.only-icon) {
    margin-right: 8px;
  }
  &:hover,
  &:focus {
    outline: none;
    color: var(--b-btn-hover-text-color);
    border-color: var(--b-btn-hover-border-color);
    background-color: var(--b-btn-hover-bg-color);
  }
  &:active {
    color: var(--b-btn-active-text-color);
    border-color: var(--b-btn-active-border-color);
    background-color: var(--b-btn-active-bg-color);
  }
  &.is-circle {
    border-radius: 50%;
    width: var(--bin-default-height);
    padding: 0;
  }
  &.is-round {
    border-radius: 20px;
  }
  &.is-plain {
    --b-btn-hover-text-color: var(--bin-color-primary);
    --b-btn-hover-bg-color: var(--b-btn-bg-color);
    --b-btn-hover-border-color: var(--bin-color-primary);
  }
  &.is-background {
    background-image: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), to(#fff));
    background-image: linear-gradient(0deg, #f5f5f5, #fff);

    &.is-disabled,
    &.is-disabled:focus,
    &.is-disabled:hover {
      background-color: var(--bin-color-select-hover);
    }
  }
  &.is-dashed {
    border-style: dashed;
  }
  &.is-disabled,
  &.is-disabled:focus,
  &.is-disabled:hover,
  &[disabled],
  &[disabled]:focus,
  &[disabled]:hover {
    cursor: not-allowed;
    color: var(--b-btn-disabled-text-color);
    border-color: var(--b-btn-disabled-border-color);
    background-color: var(--b-btn-disabled-bg-color);
  }
  &.bin-button--default {
    &.is-disabled,
    &.is-disabled:focus,
    &.is-disabled:hover,
    &.is-loading {
      cursor: not-allowed;
      color: var(--b-btn-disabled-text-color);
      border-color: var(--b-btn-disabled-border-color);
      background-color: var(--b-btn-disabled-bg-color);
    }
  }
  &.bin-button--text {
    --b-btn-text-color: var(--bin-color-primary);
    --b-btn-hover-text-color: var(--bin-color-primary-light1);
    --b-btn-active-text-color: var(--bin-color-primary-active);
    --b-btn-bg-color: transparent;
    --b-btn-border-color: transparent;
    --b-btn-hover-bg-color: transparent;
    --b-btn-hover-border-color: transparent;
    --b-btn-active-bg-color: transparent;
    --b-btn-active-border-color: transparent;
    --b-btn-disabled-border-color: transparent;
    border-color: transparent;
    color: var(--b-btn-text-color);
    background: transparent;
    background-image: none;
    padding: 0;
    height: auto;
    &:focus,
    &:hover {
      color: var(--b-btn-hover-text-color);
      border-color: transparent;
      background-color: transparent;
      box-shadow: none;
    }

    &:active {
      color: var(--b-btn-active-text-color);
    }
    &.is-disabled,
    &.is-disabled:focus,
    &.is-disabled:hover,
    &[disabled],
    &[disabled]:focus,
    &[disabled]:hover {
      color: var(--b-btn-disabled-text-color);
      background-image: none;
      cursor: not-allowed;
      background-color: transparent;
      border-color: transparent;
      opacity: 0.65;
    }
  }
  @each $val in primary, success, warning, info, danger {
    &.bin-button--$(val) {
      --b-btn-text-color: var(--bin-white-color);
      --b-btn-bg-color: var(--bin-color-$(val));
      --b-btn-border-color: var(--bin-color-$(val));

      --b-btn-hover-text-color: var(--bin-white-color);
      --b-btn-hover-bg-color: var(--bin-color-$(val)-light1);
      --b-btn-hover-border-color: var(--bin-color-$(val)-light1);

      --b-btn-active-text-color: var(--bin-white-color);
      --b-btn-active-bg-color: var(--bin-color-$(val)-active);
      --b-btn-active-border-color: var(--bin-color-$(val)-active);

      --b-btn-disabled-text-color: var(--bin-white-color);
      --b-btn-disabled-bg-color: var(--bin-color-$(val)-light2);
      --b-btn-disabled-border-color: var(--bin-color-$(val)-light2);
    }
    &.bin-button--$(val).is-dashed {
      --b-btn-text-color: var(--bin-color-$(val));
      --b-btn-bg-color: var(--bin-white-color);
      --b-btn-border-color: var(--bin-color-$(val));

      --b-btn-hover-text-color: var(--bin-color-$(val)-light1);
      --b-btn-hover-bg-color: var(--bin-white-color);
      --b-btn-hover-border-color: var(--bin-color-$(val)-light1);

      --b-btn-active-text-color: var(--bin-color-$(val)-active);
      --b-btn-active-bg-color: var(--bin-color-$(val)-light6);
      --b-btn-active-border-color: var(--bin-color-$(val)-active);

      --b-btn-disabled-text-color: var(--bin-color-$(val)-light3);
      --b-btn-disabled-bg-color: var(--bin-white-color);
      --b-btn-disabled-border-color: var(--bin-color-$(val)-light3);
    }
    &.bin-button--$(val).is-plain {
      --b-btn-text-color: var(--bin-color-$(val));
      --b-btn-bg-color: var(--bin-color-$(val)-light5);
      --b-btn-border-color: var(--bin-color-$(val)-light4);

      --b-btn-hover-text-color: var(--bin-color-$(val)-light1);
      --b-btn-hover-bg-color: var(--bin-color-$(val)-light5);
      --b-btn-hover-border-color: var(--bin-color-$(val)-light3);

      --b-btn-active-text-color: var(--bin-color-$(val)-active);
      --b-btn-active-bg-color: var(--bin-color-$(val)-light5);
      --b-btn-active-border-color: var(--bin-color-$(val)-light1);

      --b-btn-disabled-text-color: var(--bin-color-$(val)-light3);
      --b-btn-disabled-bg-color: var(--bin-color-$(val)-light5);
      --b-btn-disabled-border-color: var(--bin-color-$(val)-light3);
    }
    &.bin-button--$(val).is-transparent {
      --b-btn-text-color: var(--bin-color-$(val));
      --b-btn-bg-color: transparent;
      --b-btn-border-color: var(--bin-color-$(val)-light1);

      --b-btn-hover-text-color: var(--b-btn-text-color);
      --b-btn-hover-bg-color: var(--b-btn-bg-color);
      --b-btn-hover-border-color: var(--bin-color-$(val)-light1);

      --b-btn-active-text-color: var(--bin-color-$(val)-active);
      --b-btn-active-bg-color: var(--b-btn-bg-color);
      --b-btn-active-border-color: var(--bin-color-$(val)-active);

      --b-btn-disabled-text-color: var(--bin-color-$(val)-light2);
      --b-btn-disabled-bg-color: var(--b-btn-bg-color);
      --b-btn-disabled-border-color: var(--bin-color-$(val)-light2);
    }
    &.bin-button--$(val).bin-button--text {
      --b-btn-text-color: var(--bin-color-$(val));
      --b-btn-bg-color: transparent;
      --b-btn-border-color: transparent;

      --b-btn-hover-text-color: var(--bin-color-$(val)-light1);
      --b-btn-hover-bg-color: transparent;
      --b-btn-hover-border-color: transparent;

      --b-btn-active-text-color: var(--bin-color-$(val)-active);
      --b-btn-active-bg-color: transparent;
      --b-btn-active-border-color: transparent;

      --b-btn-disabled-text-color: var(--bin-color-$(val)-light3);
      --b-btn-disabled-bg-color: transparent;
      --b-btn-disabled-border-color: transparent;
    }
  }
}

.bin-button--large {
  height: var(--bin-large-height);
  padding: 0 14px;
  font-size: var(--bin-font-size-large);

  &.is-round {
    padding: 0 14px;
  }
  &.is-circle {
    width: var(--bin-large-height);
  }
}

.bin-button--small {
  height: var(--bin-small-height);
  padding: 0 11px;

  &.is-round {
    padding: 0 11px;
  }
  &.is-circle {
    width: var(--bin-small-height);
  }
}

.bin-button--mini {
  height: var(--bin-mini-height);
  padding: 0 7px;

  &.is-round {
    padding: 0 10px;
  }
  &.is-circle {
    width: var(--bin-mini-height);
  }
}
